<script setup lang="ts">
import { useI18n } from 'vue-i18n';
import { fetchLanguageApi } from '@/api/layout/index';
import { useRouter } from 'vue-router';
import useFormProperties from '@/composables/login/useFormProperties';
import useFormOperates from '@/composables/login/useFormOperates';
const router = useRouter();

const { t } = useI18n();
const { ruleForm, loginText, ruleFormRef, activeName } = useFormProperties(t);
const { userSign, userLogin } = useFormOperates(router, ruleForm);
function handleClick(e) {
  let { name } = e.props;
  loginText.value = t(`login['${name}Btn']`);
}
function submitForm() {
  ruleFormRef.value.validate((valid: any) => {
    if (valid) {
      if (activeName.value === 'sign') {
        userSign(ruleForm);
      } else if (activeName.value === 'login') {
        userLogin(ruleForm);
      }
    } else {
      return false;
    }
  });
}
function getLanguage() {
  fetchLanguageApi().then((res) => {
    let { success } = res;
    if (success) {
      loginText.value = t('login.loginBtn');
      console.log('获取当前语言包成功');
    }
  });
}
//getLanguage();
</script>
<template>
  <div class="login-page">
    <div class="left-part"></div>
    <div class="right-part">
      <div class="login-pannel">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane :label="t('login.loginTab')" name="login"></el-tab-pane>
          <el-tab-pane :label="t('login.signTab')" name="sign"></el-tab-pane>
        </el-tabs>
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          class="demo-ruleForm"
        >
          <el-form-item prop="mobile">
            <el-input
              v-model="ruleForm.mobile"
              :placeholder="t('login.placeMobile')"
            />
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="ruleForm.password"
              :placeholder="t('login.placePass')"
            />
          </el-form-item>
          <el-button @click="submitForm">{{ loginText }}</el-button>
        </el-form>
      </div>
    </div>
  </div>
</template>
<style lang="scss">
@import '@/assets/scss/login/index.scss';
</style>
